<template>
	<view v-if="isLogin==false">
		<view  class="empty">
			<u-empty text="您尚未登录,请前去登录" mode="list"></u-empty>
<!--			<u-empty mode="order"></u-empty>-->
		</view>
	</view>
	<view class="" v-else>
		<!-- 加载司机的订单信息 -->
		<driver-order ref='driverOrder' v-if="role === 'driver'"/>
		<!-- 加载用户订单 -->

		<user-order ref='userOrder'  v-else/>
	</view>
</template>

<script>
	import driverOrder from './componets/driverOrder.vue'
	import userOrder from './componets/userOrder.vue'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components:{
			driverOrder,
			userOrder
		},
		data() {
			return {
			}
		},
		// 页面加载钩子函数
		// 只会触发一次
		onLoad: function(options) {
		},
		onReady() {
			if (this.role === 'driver') {
				this.$store.dispatch('driverOrderInfo/CLEAR');
				this.$refs.driverOrder.getData();
			} else {
				this.$refs.userOrder.getOrder();
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			if (this.role === 'driver') {
				this.$refs.driverOrder.getData();
			} else {
				this.$refs.userOrder.getOrder();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed:{
			...mapGetters([
				'role',
				'isLogin',
				'avatar',
				'name',
			])
		}

	}
</script>
<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>
<style lang="scss">
	.empty {
		position: absolute;
		top: 30%;
		left: 50%;
		right: 50%;
	}
</style>
